<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '多经线索详情',
  },
}
</route>

<template>
  <view class="page-container">
    <view class="p-3 space-y-3">
      <!-- 基本信息 -->
      <view class="bg-white rounded-lg p-3 shadow-sm">
        <view class="text-gray-900 font-medium mb-2 text-base">基本信息</view>
        <view class="grid grid-cols-2 gap-2">
          <view class="flex flex-col">
            <span class="text-[#6e6e6e] mb-1">线索编号：</span>
            <span class="">{{ clue.clueNumber }}</span>
          </view>
          <view class="flex flex-col">
            <span class="text-[#6e6e6e] mb-1">线索名称：</span>
            <span class="text-#4477ee font-500">{{ clue.clueName }}</span>
          </view>
          <view class="flex flex-col">
            <span class="text-[#6e6e6e] mb-1">房间编号：</span>
            <span>{{ clue.roomName }}</span>
          </view>
          <view class="flex flex-col">
            <span class="text-[#6e6e6e] mb-1">业户姓名：</span>
            <span>{{ clue.customerName }}</span>
          </view>
          <view class="flex flex-col">
            <span class="text-[#67C23A] mb-1">{{ clue.notice || '暂无代提商品' }}</span>
          </view>
        </view>
      </view>

      <!-- 推荐依据 -->
      <view class="bg-white rounded-lg p-3 shadow-sm">
        <view class="flex items-center justify-between mb-3">
          <view class="text-gray-900 font-medium text-base">推荐依据</view>
          <view class="text-xs text-gray-400">该分析由AI智能生成</view>
        </view>

        <view class="space-y-3">
          <!-- 聊天意图分析 -->
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view class="flex-1">
              <view class="text-gray-900 mb2 flex justify-between">
                <view>聊天意图分析获取线索获取</view>
                <view class="text-#4477ee ml-2 w-10 shrink-0 text-right">详情</view>
              </view>
              <view class="flex items-end">
                <view class="text-[#6e6e6e]">{{ clue.clueChat }}</view>
              </view>
            </view>
          </view>

          <!-- 需求识别 -->
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view class="flex-1">
              <view class="text-gray-900 mr-2 mb-3">需求识别</view>
              <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded">
                {{ clue.clueDemandName }}
              </span>
            </view>
          </view>

          <!-- 画像分析 -->
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view class="flex-1">
              <view class="text-gray-900 mr-2 mb-2">画像分析</view>
              <view class="flex space-x-2">
                <template v-for="item in clue.cluePortraitName.split(' ')" :key="item">
                  <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded" v-if="item">
                    {{ item }}
                  </span>
                </template>
              </view>
            </view>
          </view>

          <!-- 行为分析 -->
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view class="flex-1">
              <view class="text-gray-900 mr-2 mb2">行为分析</view>
              <view class="flex space-x-2">
                <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded">
                  {{ clue.clueBehavior }}
                </span>
              </view>
            </view>
          </view>

          <!-- 负面因素 -->
          <view class="flex items-start">
            <wd-icon name="check-outline" class="mr-2" color="#67C23A" size="22px"></wd-icon>

            <view class="flex-1">
              <view class="text-gray-900 mr-2 mb2">负面因素分析</view>
              <view class="flex space-x-2">
                <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded">
                  {{ clue.clueNegative }}
                </span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 建议推荐服务 -->
      <view class="bg-white rounded-lg p-3 shadow-sm">
        <view class="text-gray-900 font-medium mb-3 text-base">建议推荐服务</view>
        <view class="flex items-center p-3 border rounded-lg">
          <wd-img :width="100" :height="150" src="/static/baojiefuwu.png" :enable-preview="true" />
        </view>
      </view>

      <!-- 推荐话术 -->
      <view class="bg-white rounded-lg p-3 shadow-sm">
        <view class="flex items-center justify-between mb-3">
          <view class="text-gray-900 font-medium text-base">推荐话术</view>
        </view>
        <view class="bg-gray-50 p-3 rounded-lg text-sm">
          <wd-textarea
            v-model="recommendContent"
            :maxlength="225"
            readonly
            size="large"
            placeholder="请输入..."
            auto-height
            style="--wot-textarea-bg: #f9fafb; --wot-textarea-not-empty-border-color: #f9fafb"
          />
        </view>
        <view class="text-right">
          <wd-button @click="show = true" plain class="mt-3" :round="false" size="small">
            修改话术
          </wd-button>
        </view>
      </view>
    </view>
    <wd-popup
      v-model="show"
      position="bottom"
      lock-scroll
      :close-on-click-modal="false"
      closable
      :safe-area-inset-bottom="true"
      custom-style="height: 500px;"
      @close="handleClose"
    >
      <view class="p-[12px] bg-gray-100 h-[500px]">
        <view class="font-medium mb-2">修改话术：</view>
        <wd-textarea
          class="mt-3"
          v-model="recommendContent"
          :maxlength="225"
          clearable
          show-word-limit
          size="large"
          placeholder="请输入..."
          custom-textarea-class="textarea-content"
        />
      </view>
    </wd-popup>
    <!-- 底部按钮 -->
    <view class="fixed bottom-0 left-0 w-full bg-white py-3">
      <button
        class="bg-#4477ee text-white w-[80%] m-auto rounded-b font-medium"
        @click="handleShareAppMessage"
      >
        分享推荐
      </button>
    </view>
    <wd-action-sheet
      v-model="showAction"
      :panels="panels"
      @close="closeAction"
      @select="selectAction"
    />
  </view>
</template>

<script lang="ts" setup>
//
import * as ww from '@wecom/jssdk'
import { registerWeChat } from '@/utils/wecom'
import { getClue, IClue } from './api'
import qiweihaoyou from '@/static/svg/qiweihaoyou.svg'
import weixinhaoyou from '@/static/svg/weixinhaoyou.svg'
registerWeChat()
const recommendContent = ref('')
const show = ref(false)
const showAction = ref(false)
const clue = ref<IClue>({})
function goPage(url: string) {
  uni.navigateTo({
    url,
  })
}
const panels = ref([
  {
    iconUrl: weixinhaoyou,
    title: '微信好友',
  },
  {
    iconUrl: qiweihaoyou,
    title: '企微好友',
  },
])
function selectAction({ item, index }) {
  console.log(index)
  if (index === 0) {
    // 微信
    handleShareWechatMessage()
  } else if (index === 1) {
    // 企微
    handleShareAppMessage()
  }
}
function openAction() {
  showAction.value = true
}
function closeAction() {
  showAction.value = false
}
onLoad((params) => {
  console.log(params.id)
  getData(params.id)
})
function getData(id) {
  getClue(id).then((res) => {
    console.log(res)
    clue.value = res.data
    recommendContent.value = (res.data as { suggestReply: string })?.suggestReply
  })
}

const handleShareWechatMessage = () => {
  // 微信
  ww.shareWechatMessage({
    title: clue.value.clueName,
    desc: recommendContent.value,
    link: clue.value.suggest,
    imgUrl:
      'http://zz-ai-test.xinkt.com/profile/upload/2025/03/27/baojiefuwu_20250327181719A001.png',
  })
}
const handleShareAppMessage = () => {
  // 企微
  ww.shareAppMessage({
    title: clue.value.clueName,
    desc: recommendContent.value,
    link: clue.value.suggest,
    imgUrl:
      'http://zz-ai-test.xinkt.com/profile/upload/2025/03/27/baojiefuwu_20250327181719A001.png',
  })
}

function handleClose() {
  show.value = false
}
function goBack() {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss" scoped>
//
.page-container {
  padding-bottom: 70px;
  background-color: #f5f7fa;
  .check-icon {
    color: #52c41a;
  }
}
:deep(.textarea-content) {
  height: 500rpx;
}
</style>
